<template>
      <!-- 新契约工作列表模块-end单 -->
  <div class="fillcontain">
    <bt-col-header title="规则组版本"></bt-col-header>
    <!-- 查询表单 -->
    <div class="page-content">
      <el-form
        :model="searchParams"
        ref="ruleForm"
        label-width="120px"
        class=""
      >
        <el-row >
          <el-col :span="6" class="contain-padding">
            <el-form-item label="规则组名称" prop="groupName">
              <el-input
                clearable
                v-model="searchParams.groupName"
                placeholder="规则组名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="contain-padding">
            <el-form-item label="规则组标识" prop="groupIdentify">
              <el-input
                clearable
                v-model="searchParams.groupIdentify"
                placeholder="流程编码"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="contain-padding">
            <el-form-item label="发版人" prop="creuserid">
              <el-input
                clearable
                v-model="searchParams.creuserid"
                placeholder="发版人"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="contain-padding">
            <el-form-item label="操作人" prop="lastUpdateTime">
              <el-input
                clearable
                v-model="searchParams.lastUpdateTime"
                placeholder="操作人"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="contain-padding">
            <el-form-item label="发布时间（起）" prop="publishBegDate">
              <el-date-picker
                type="datetime"
                :format="'yyyy-MM-dd HH:mm:ss'"
                clearable
                v-model="searchParams.publishBegDate"
                placeholder="发布时间（起）"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="contain-padding">
            <el-form-item label="发布时间（止）" prop="publishEndDate">
              <el-date-picker
                type="datetime"
                :format="'yyyy-MM-dd HH:mm:ss'"
                clearable
                v-model="searchParams.publishEndDate"
                placeholder="发布时间（止）"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="6">
            <el-form-item label="状态" prop="auditStatus">
              <el-select clearable v-model="searchParams.auditStatus" filterable placeholder="请选择">
                <el-option
                  v-for="item in auditStatus"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          
        </el-row>
        <div class="row">
          <div class="col-md-12 text-center mt-2">
            <rich-button type="info" plain class="el-icon-search" shape="capsule" @click="search">查询</rich-button>
            <rich-button  class="el-icon-quit" shape="capsule" @click="resetSearch">重置</rich-button>
          </div>
        </div>
      </el-form>  
      <div class="">
        <!-- 操作按钮 -->
        <div class="btn-padding left">
          <el-button
              :plain="true" type="info" icon="upload" 
              @click="compareVersion"
              >导出</el-button
            >
            <el-button
              :plain="true" type="info" icon="rmb-cirline" 
              @click="compareVersion"
              >对比</el-button
            >
        </div>
            
        <!-- 查询结果列表 -->
        <div class="table_container">
          <el-table
            ref="multipleTable"
            v-loading="loading"
            :data="tableData"
            tooltip-effect="dark"
            highlight-current-row
            header-cell-class-name="table-header-class"
            empty-text="无符合查询条件任务"
            style="width: 100%"
          >
            <el-table-column type="selection"></el-table-column>
            <el-table-column
              property="GROUP_NAME"
              label="规则组名称"
              align="center"
              show-overflow-tooltip
              min-width="120"
            ></el-table-column>
            <el-table-column
              property="GROUP_IDENTIFY"
              label="规则组标识"
              align="center"
              show-overflow-tooltip
              min-width="80"
            ></el-table-column>
            <el-table-column
              property="GROUP_VERSION"
              label="版本号"
              align="center"
              show-overflow-tooltip
              min-width="80"
            ></el-table-column>
            <el-table-column
              property="LAST_UPDATE_ID"
              label="操作人"
              align="center"
              show-overflow-tooltip
              min-width="100"
            ></el-table-column>
            <el-table-column
              property="LAST_UPDATE_TIME"
              label="操作时间"
              align="center"
              show-overflow-tooltip
              min-width="160"
            >
              <template slot-scope="scope">
                {{ scope.row.LAST_UPDATE_TIME | dateFormat }}
              </template>
            </el-table-column>
            <el-table-column
              property="CRE_USER_ID"
              label="发布人"
              align="center"
              show-overflow-tooltip
              min-width="100"
            ></el-table-column>
            <el-table-column
              property="CRE_TIME"
              label="发布时间"
              align="center"
              show-overflow-tooltip
              min-width="160"
            >
              <template slot-scope="scope">
                {{ scope.row.CRE_TIME | dateFormat }}
              </template>
            </el-table-column>
            <!-- <el-table-column property="status" label="状态"  align='center'  show-overflow-tooltip
                            min-width="50">
              <template slot-scope="scope">
                {{scope.row.status | auditStatusFormat}}
                <el-tooltip v-if="scope.row.auditStatus === '3'" class="item" :content="scope.row.auditRemark" placement="bottom">
                  <i class="el-icon-info" ></i>
                </el-tooltip>
              </template>
            </el-table-column> -->
            <!-- <el-table-column
              property=""
              label="修改记录"
              align="center"
              show-overflow-tooltip
              min-width="120"
            >
              <template slot-scope="scope">
                <el-link type="primary" @click="editDetail(scope.row)"
                  >查看</el-link
                >
              </template>
            </el-table-column> -->
            <el-table-column
              property=""
              label="操作"
              align="center"
              show-overflow-tooltip
              min-width="120"
            >
              <template slot-scope="scope">
                <el-button type="text" @click="showDetail(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="float-right mt-2"
            background
            :page-sizes="paginations.pageSizes"
            :page-size="paginations.pageSize"
            :layout="paginations.layout"
            :total="paginations.total"
            :current-page="paginations.pageIndex"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    

    
  </div>
</template>

<script>
import { rulePage } from "@/api/version/version";
import constant from "@/api/constant";
export default {
  components: {},
  data() {
    return {
      loading: false,
      tableData: [],
      searchParams: {
        // 规则组名称
        flowName: "",
        // 操作时间（起）
        flowIdentify: "",
        begTime: "",
        publishUser: "",
        publishBegDate: "",
        publishEndDate: "",
        auditStatus: "",
        pageSize: "",
        pageNumber: "",
      },
      auditStatus: constant.status,
      paginations: {
        total: 0, // 总数
        pageIndex: 1, // 当前位于哪页
        pageSize: 20, // 1页显示多少条
        pageSizes: [5, 10, 15, 20], //每页显示多少条
        layout: "total, sizes, prev, pager, next, jumper", // 翻页属性
      },
    };
  },
  created() {
    this.getList();
  },
  // activated () {
  //   this.getList()
  // },
  mounted() { },
  methods: {
    showDetail(data) {
      this.$router.push({
        path: "/drools-ruleConfig/group/view/" + data.id + "/" + 'd', query: { TASK_NO: data.TASK_NO, address: 'rulegrouplist' }
      });
    },
    editDetail(data) {
      // console.log(data, "data");
    },
    search() {
      this.paginations.pageIndex = 1;
      this.getList();
    },
    getList() {
      this.paginations.total = 0;
      this.tableData = [];
      this.$store.dispatch("loading/CHANGE_LOADING", true);
      this.searchParams.pageNumber = this.paginations.pageIndex;
      this.searchParams.pageSize = this.paginations.pageSize;
      rulePage(this.searchParams)
        .then((res) => {
          this.$store.dispatch("loading/CHANGE_LOADING", false);
          if (
            res.data.resultCode == constant.SUCCESS &&
            res.data.data &&
            res.data.data.list.length
          ) {
            this.paginations.total = res.data.data.totalCount;
            this.tableData = res.data.data.list;
          }
        })
        .catch((err) => {
          this.$store.dispatch("loading/CHANGE_LOADING", false);
        });
    },
    compareVersion() {
      constant.clearTag(this);
      this.$router.push({ name: constant.routerName.ruleGroupCompare });
    },
    // 清除查询条件
    resetSearch() {
      this.searchParams.groupName = "";
      this.searchParams.publishBegDate = "";
      this.searchParams.publishEndDate = "";
      this.searchParams.auditStatus = "";
      this.searchParams.publishUser = "";
      this.searchParams.groupIdentify = "";
    },
    // 每页多少条切换
    handleSizeChange(pageSize) {
      this.paginations.pageSize = pageSize;
      this.getList();
    },
    // 上下分页
    handleCurrentChange(page) {
      this.paginations.pageIndex = page;
      this.getList();
    },
  },
  watch: {},
  computed: {},
  filters: {
    auditStatusFormat: function (value) {
      return constant.getLabel(value, constant.status);
    },
    dateFormat(data) {
      return constant.dateFormat("YYYY-mm-dd HH:MM:SS", data);
    },
  },
};
</script>

<style lang="less" scoped>
.fillcontain {
  padding-bottom: 0;

  .fastQuery {
    padding: 15px 20px 10px 20px;
    background: #fff;
    border-bottom: 1px solid #e1e1e1;

    .fastQuery_title {
      color: #666;
      padding: 6px 0px;
    }

    .fastQuery_item {
      margin: 0 10px;
    }

    .item_default {
      .el-button {
        color: #409eff !important;
        border-color: #c6e2ff !important;
        background-color: #ecf5ff !important;
      }
    }

    .moreCondition {
      color: #68a3fc;
      cursor: pointer;
      padding: 6px 0px;

      .el-icon-d-arrow-right {
        transform: rotate(90deg);
      }

      .el-icon-d-arrow-left {
        transform: rotate(-90deg);
      }
    }
  }
}

.contain {
  background: #fff;
  padding: 10px;
  margin-bottom: 20px;
}

.pagination {
  padding: 10px 20px;
  text-align: right;
}

.operationIcon {
  // padding: 12px;
  border: 1px solid #e5e5e5;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: inline-block;
  cursor: pointer;
  box-shadow: 0 0 3px #f9f9f9;

  .svg-icon {
    font-size: 14px;
    fill: #68a3fc;
  }
}

.search_container {
  padding: 0px 20px 0 20px;
}

.el-dropdown {
  vertical-align: top;
}

.el-dropdown + .el-dropdown {
  margin-left: 15px;
}

.el-icon-arrow-down {
  font-size: 12px;
}

</style>



